import React, { PureComponent, Fragment } from 'react';
import { connect } from 'react-redux';
import {
    HomeWrapper,
    HomeLeft,
    HomeRight,
    BackTop
} from './sytle';
import Topic from './components/Topic';
import List from './components/List';
import Recommend from './components/Recommend';
import Writer from './components/Writer';
import { actionCreators } from './store';

class Home extends PureComponent {
    handleScrollTop() {
        window.scrollTo(0, 0);
    }
    render() {
        return (
            <Fragment>
                <HomeWrapper>
                    <HomeLeft>
                        <img className='banner-img' alt='' src="//upload.jianshu.io/admin_banners/web_images/4318/60781ff21df1d1b03f5f8459e4a1983c009175a5.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" />
                        <Topic />
                        <List />
                    </HomeLeft>
                    <HomeRight>
                        <Recommend />
                        <Writer/>
                    </HomeRight>
                    {
                        this.props.showScroll ?<BackTop onClick={this.handleScrollTop}>顶部</BackTop>:null
                    }
                </HomeWrapper>
            </Fragment>
        )
    }
componentDidMount() {
    this.props.changeHomeData();
    this.bindEvent();
}

componentWillUnmount() {
    window.removeEventListener('scroll',this.props.changeScrollTopShow)
}

bindEvent() {
    window.addEventListener('scroll',this.props.changeScrollTopShow)
}
}

const mapState = (state) => ({
    showScroll: state.getIn(['home','showScroll'])
})

const mapDispatch = (dispatch) => ({
    changeHomeData() {
        const action = actionCreators.getHomeInfo();
        dispatch(action);
    },
    changeScrollTopShow(e) {
        if (document.documentElement.scrollTop > 300) {
            dispatch(actionCreators.toggleTopShow(true));
        } else {
            dispatch(actionCreators.toggleTopShow(false));
        }
    }
})

export default connect(mapState,mapDispatch)(Home);